﻿@model DHQGHN.PM2.ViewModels.MappingDiaBanViewModel
<script type="text/javascript">
    $(function () {
        @functions{
            public string GetAntiForgeryToken()
            {
                string cookieToken, formToken;
                AntiForgery.GetTokens(null, out cookieToken, out formToken);
                return cookieToken + "," + formToken;
            }
        }
        $(document).ready(function () {

            $.ajax({
                url: '@Url.Action("AreaDS_TKMapped")',
                type: 'POST',
                datatype: 'json',
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                data: { areaID: $('#AREA_ID').val() },
                success: function (lstItems) {
                    $.each(lstItems, function (i, lstItem) {
                        $('#chk' + lstItem.Value).prop('checked', true);
                        $('#td' + lstItem.Value).css("color", "white");
                        $('#td' + lstItem.Value).css("background-color", "#19A3A3");
                        $.ajax({
                            url: '@Url.Action("AreaConvertCount")',
                            type: 'POST',
                            datatype: 'json',
                            data: { AreaID: $('#chk' + lstItem.Value).val() },
                            headers: {
                                'VerificationToken': '@GetAntiForgeryToken()'
                            },
                            success: function (result) {
                                $('#divLoading').hide();
                                if (result.Count > 0)
                                    $('#al' + lstItem.Value).append('Có '
                                        + result.Count + ' bản ghi cư dân');
                                else
                                    $('#al' + lstItem.Value).append('Không có bản ghi cư dân nào trong khu vực');
                            },
                            error: function (ex) {
                                $('#divLoading').hide();
                                alert('Lỗi kỹ thuật.' + ex);
                            }
                        })
                    });
                },
                error: function (ex) {
                    alert('Lỗi kỹ thuật.' + ex);
                }
            })

            if ($('#' + $('.notmapped').attr('id')).is(':checked') == true) {
                $('#td' + $(this).val()).css("color", "white");
                $('#td' + $(this).val()).css("background-color", "#19A3A3");
            }
            else {
                $('#td' + $(this).val()).css("color", "black");
                $('#td' + $(this).val()).css("background-color", "white");
            }

            if ($('#' + $('.mapped').attr('id')).is(':checked') == true) {
                $('#td' + $(this).val()).css("color", "white");
                $('#td' + $(this).val()).css("background-color", "#19A3A3");
            }
            else {
                $('#td' + $(this).val()).css("color", "black");
                $('#td' + $(this).val()).css("background-color", "white");
            }
        });


        $('.notmapped').click(function () {

            var getchkid = $(this).attr('id');
            var isChecked = $('#' + getchkid).is(':checked');

            if ($('#' + getchkid).is(':checked')) {
                $('#divLoading').show();
                $('#td' + $(this).val()).css("color", "white");
                $('#td' + $(this).val()).css("background-color", "#19A3A3");
                $.ajax({
                    url: '@Url.Action("AreaConvertCount")',
                    type: 'POST',
                    datatype: 'json',
                    data: { AreaID: $('#' + getchkid).val() },
                    headers: {
                        'VerificationToken': '@GetAntiForgeryToken()'
                    },
                    success: function (result) {
                        $('#divLoading').hide();

                        if (result.Count > 0)
                            $('#al' + $('#' + getchkid).val()).append('Có '
                                + result.Count + ' bản ghi cư dân');
                        else
                            $('#al' + $('#' + getchkid).val()).append('Không có bản ghi cư dân nào trong khu vực');
                        $('#' + getchkid).prop('checked', true);
                    },
                    error: function (ex) {
                        $('#divLoading').hide();
                        alert('Lỗi kỹ thuật.' + ex);
                    }
                })
                return false;
            }
            else {
                $('#' + getchkid).prop('checked', false);
                $('#al' + $('#' + getchkid).val()).empty();
                $('#ptdt' + $('#' + getchkid).val()).empty();
                $('#td' + $(this).val()).css("color", "black");
                $('#td' + $(this).val()).css("background-color", "white");
            }
        });
        //$('.mapped').click(function () {

        //    var getchkid = $(this).attr('id');
        //    var isChecked = $('#' + getchkid).is(':checked');

        //    if ($('#' + getchkid).is(':checked') == true) {
        //        $('#td' + $(this).val()).css("color", "white");
        //        $('#td' + $(this).val()).css("background-color", "#19A3A3");
        //    }
        //    else {
        //        $('#td' + $(this).val()).css("color", "black");
        //        $('#td' + $(this).val()).css("background-color", "white");
        //    }
        //});

        //$('#delete').click(function () {

        //    var areaListVal = null;
        //    areaListVal = [];

        //    $('input[name="mapped"]:checked').each(function () {
        //        areaListVal.push($(this).attr('value'));
        //    });
        //    $('#AREA_DSKHHGD_ID').val(areaListVal);
        //    if (areaListVal.length == 0) {
        //        alert('Bạn cần chọn địa bàn để bỏ gán')
        //        return false;
        //    }
        //    else
        //        return confirm('Bạn có chắc muốn bỏ gán ' + areaListVal.length + ' địa bàn đã chọn không?');
        //});

        //$('#add').click(function () {

        //    var areaListVal = null;
        //    areaListVal = [];

        //    $('input[name="notmapped"]:checked').each(function () {
        //        areaListVal.push($(this).attr('value'));
        //    });
        //    $('#AREA_DSKHHGD_ID').val(areaListVal);
        //    if (areaListVal.length == 0) {
        //        alert('Bạn cần chọn địa bàn để gán')
        //        return false;
        //    }
        //    else
        //        return confirm('Bạn có chắc muốn gán các địa bàn đã chọn không?');
        //});
    });
</script>

@using (Html.BeginForm("IndexArea_TK_DS", "MappingDiaBan", FormMethod.Post, new { id = "MappingArea_DSForm" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    @*<div style="margin-bottom:3%;">*@
    @*<div align="center"><b>Địa bàn Thống kê: </b> @Html.DisplayTextFor(model => model.AREA_NAME)</div>
        <br />*@
    @Html.HiddenFor(model => model.AREA_ID)
    @Html.HiddenFor(model => model.AREA_DSKHHGD_ID)
    @Html.HiddenFor(model => model.areaSelected)
    <div class="row">
        <div class="col-md-12">
            <div class="btn default" style="width:100%;">
                <h4 style="margin: 0px !important">Địa bàn dân số KHHGĐ đã gán</h4>
            </div>
            @if (Model.area != null) { 
            <div style="height: 300px; overflow-y: auto; border: 1px solid #e5e5e5;">
                <table class="table table-striped table-bordered table-hover dataTable no-footer" style="margin-top:0px !important;">
                    @foreach (var area1 in @Model.area)
                    {
                        var checkBoxNotSelected = "chk" + area1.Value;
                        var text = "td" + area1.Value;
                        var alert = "al" + area1.Value;
                        <tr>
                            <td width="20px" align="center">
                                <input type="checkbox" id="@checkBoxNotSelected" name="notmapped" class="notmapped" value="@area1.Value" />
                            </td>
                            <td id="@text" width="200px">
                                @area1.Text
                            </td>
                            <td id="@alert" align="center"></td>
                        </tr>

                    }
                </table>
            </div>
            }
            else
            {
                <div align="center"><h4>Không tìm thấy kết quả nào phù hợp</h4></div>
            }
        </div>
        @*<div class="col-md-2">
            <div align="center" class="hidden-sm hidden-xs" style="margin-top:100px;">
                <button type="submit" name="command" value="Add" id="add" class="btn btn-default" style="width:100%;"><i class="fa fa-arrow-right"></i></button>
                <button type="submit" name="command" value="Delete" id="delete" class="btn btn-md" style="width: 100%; margin-top:10px;"><i class="fa fa-arrow-left"></i></button>
            </div>
            <div align="center" class="visible-sm visible-xs" style="margin:10px 0px 10px 0px;">
                <button type="submit" name="command" value="Add" id="add" class="btn btn-md btn-default"><i class="fa fa-arrow-down"></i></button>
                <button type="submit" name="command" value="Delete" id="delete" class="btn btn-md" style="margin-left:0px"><i class="fa fa-arrow-up"></i></button>
            </div>
        </div>
        
        <div class="col-md-5">
            <div class="btn default" style="width:100%;">
                <h4 style="margin: 0px !important">địa bàn dân số đã gán</h4>
            </div>
            <div style="height: 300px; overflow-y: auto; border: 1px solid #e5e5e5;">
                <table class="table table-striped table-bordered table-hover dataTable no-footer" style="margin-top: 0px !important;">
                    @foreach (var area2 in @Model.areaSelected)
                    {
                        var checkBoxSelected = "chk" + area2.Value;
                        var text = "td" + area2.Value;
                        <tr>
                            <td width="20px" style="padding: 8px">
                                <input type="checkbox" id="@checkBoxSelected" name="mapped" class="mapped" value="@area2.Value" />
                            </td>
                            <td id="@text" style="padding: 8px">
                                @area2.Text
                            </td>
                        </tr>

                    }
                </table>
            </div>
        </div>*@
    </div>
}




